import type { Meta, StoryObj } from "@storybook/react";
import { action } from "@storybook/addon-actions";
// @ts-ignore
import { useArgs } from "@storybook/preview-api";
import MenuList from "@/components/Menu/MenuList";
import React from "react";

let menuList = [
  {
    name: "HD Participant Management",
    value: "red",
    isSelect: false,
    children: [
      { name: "Enrol Participant", value: "ep" },
      { name: "View Participant", value: "vp" },
      { name: "Update Participant", value: "up" },
      { name: "Reprint Confirmation Letter", value: "rcl" },
    ],
  },
  {
    name: "Utilities",
    value: "blue",
    children: [
      {
        name: "Incomplete and Complication Cases Follow-up",
        value: "uicf",
        children: [
          { name: "Enrol Participant", value: "ep" },
          { name: "View Participant", value: "vp" },
          { name: "Update Participant", value: "up" },
          { name: "Reprint Confirmation Letter", value: "rcl" },
        ],
      },
    ],
  },
  {
    name: "Reporting",
    value: "grey",
    children: [
      {
        name: "Patient Enrolment Report by Follow-up Hospital",
        value: "c1",
      },
      { name: "Deviated Treatment Sessions Report By Centre", value: "c2" },
      {
        name: "Deviated Treatment Sessions Report By Follow-up Hospital",
        value: "c3",
      },
      {
        name: "Incomplete and Complication Cases Report By Centre",
        value: "c4",
      },
      {
        name: "Incomplete and Complication Cases Report By Follow-up Hospital",
        value: "rcl",
      },
    ],
  },
];

// To reset one (or more) args:
// resetArgs((argNames: ['key']));
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: "Ui/MenuList",
  component: MenuList,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: "centered",
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    // backgroundColor: { control: "color" },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: {
    itemClick: action("itemClick"),
  },
  decorators: [
    (cb, ctx) => {
      // console.log(ctx);
      return cb();
    },
  ],
} satisfies Meta<typeof MenuList>;

export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
  args: {
    list: menuList,
  },
  render: function Render(args) {
    const [{ list }, updateArgs] = useArgs();
    // const [list, listSet] = useState(args.list);
    console.log(args.list, list);
    function itemClick(_item, index: number) {
      const temList = [...list];
      temList.forEach((v) => {
        v.isSelect = false;
      });
      temList[index].isSelect = true;
      updateArgs({
        list: temList,
      });
    }

    return <MenuList {...args} list={list} itemClick={itemClick} />;
  },
};
